import React, {PureComponent} from 'react';
import {
  Form,
  Input,
  Select,
  Timeline,
  Row,
  Col,
  Button,
  Radio,
  Steps,
  Checkbox,
  Icon,
  Table,
  InputNumber,
  TimePicker,
  Modal,
  message
} from "antd";

import {formItemLayout, formItemLayout3, formItemLayout4, formItemLayout2} from "./Constants"
import PMap from '../../../components/Pro/PMap';
import bcx_utils from '../../../common/bcx_utils';

const FormItem = Form.Item;


/**
 * 配置角色及权限
 */
export default class SetLocation extends PureComponent {
  constructor(props, context) {
    super(props, context);
    this.state = {
      address: "",
      points: [],
      visible: false, //添加地点
      addressRange: "0"//考勤范围
    };
  }

  /******************************生命周期******************************/

  componentDidMount = () => {

    //初始化考勤范围
    const {dataSource} = this.props;
    if (dataSource.length !== 0) {
      this.setState({
        addressRange: dataSource[0].addressRange
      });
      this.props.addressRangeChange(dataSource[0].addressRange);
    }else {
      this.props.addressRangeChange(0);
    }
  }

  componentWillReceiveProps = (nextProps, newState) => {

  }


  /******************************ajax请求******************************/


  /******************************相关事件******************************/
    //提交地点
  handleOk = e => {
    const {address, points} = this.state;
    if (address === "" || points.length === 0) {
      bcx_utils.preventRepeatAsync((callback) => callback((resolve) => {
        message.warning('请选择地点', 1.5, () => {
          window.setTimeout(() => {
            resolve();
          }, 500);
        });
      }));
      return;
    }
    this.props.addArea(points, address);
    this.setState({
      visible: false
    });
  };
  //取消地点
  handleCancel = e => {
    this.setState({
      visible: false,
      address: "",
      points: [],
    });
  };

  deleteItem = (index,record) => {
    this.props.deleteLocalItem(index,record);
  }


  areaChange = (points, address) => {
    console.log(points, address);
    this.setState({points, address});
  }

  inputchange = (e) => {
    const addressRange = e.target.value.trim().replace(/[^0-9]/g, "");
    this.setState({addressRange});
    this.props.addressRangeChange(addressRange);
  }

  /******************************render******************************/

  render() {
    const {dataSource = []} = this.props;
    const newDataSource = dataSource.map((val, key) => ({...val, ...{key}}));
    /* 考勤地点--drawer */
    const columns = [
      {
        key: "1",
        title: "考勤地点",
        dataIndex: "address",
      },
      {
        width: 60,
        title: "操作",
        dataIndex: "b",
        render: (text, record,index) =>
          <span style={{color: "#0F71FF"}}
                onClick={this.deleteItem.bind(this,index,record)}>删除</span>
      }
    ];


    return (
      <div>
        <Row span={24}>
          <Row className="resetant-row">
            <Col span={12}>
              <FormItem {...formItemLayout3} label="设置出勤地点">
                <div>
                  <Button
                    type="primary"
                    ghost
                    onClick={() => {
                      this.setState({visible: true});
                    }}
                  >
                    添加地点
                  </Button>
                  <span className="exclamation">
                        <Icon type="exclamation-circle"/>可设置多个考勤地点
                      </span>
                </div>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout4} label="有效范围">
                <Input
                  addonAfter="米"
                  placeholder="请输入"
                  value={this.state.addressRange}
                  onChange={this.inputchange}/>
              </FormItem>
            </Col>
          </Row>
          <FormItem {...formItemLayout} label=" " colon={false}>
            <Table
              style={{marginTop: 16}}
              size="middle"
              pagination={false}
              columns={columns}
              dataSource={newDataSource}
            />
          </FormItem>
        </Row>
        <Modal
          title="添加地点"
          visible={this.state.visible}
          okText="提交"
          cancelText="关闭"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={800}
        >
          <PMap
            areaChange={this.areaChange}
            ifProvince={false}/>
        </Modal>

      </div>

    );
  }
}
